# 使用官方 Node.js 镜像作为基础镜像
FROM node:20 AS build-stage

# 设置工作目录为 /app，后续操作将在此目录下进行
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 安装依赖
RUN npm install

# 复制项目文件
COPY . .

# 构建项目
RUN npm run build

# 使用 Nginx 作为生产服务器
FROM nginx:alpine

# 将构建好的文件复制到 Nginx 的默认静态文件目录   /app/dist为build的文件夹
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 暴露 80 端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]


# docker前端部署  需要打包 然后运行

# docker 运行命令

# 在 docker desktop 中，然后点击右上角的 Settings 图标，找到 Docker Engine。
# 在配置中添加以下内容：
# "registry-mirrors": [
# "https://registry.docker-cn.com",
# "https://mirror.gcr.io"
# ]

# 打包
# docker build -t vue-project .
# 运行
# docker run -d -p 8080:80 vue-project

# 查看容器和镜像
# docker ps -a
# 停止
# docker stop <容器ID>
# 启动
# docker start <容器ID>

# 查看现有容器和镜像
# docker images
# 导出镜像
# docker save -o vue-project.tar vue-project

# docker rm <容器ID>
# docker rmi <镜像ID>
# docker rmi vue-project

# docker tag vue-project vue-project:v1
# docker push vue-project:v1
# docker pull vue-project:v1
# docker run -d -p 8080:80 vue-project:v1


# 访问localhost:8080